<template>
    <div class="doctorDetail">
        <el-button size="small" class="goBack" @click="goBack">返回</el-button>
        <div class="baseInfo">
            <h1>基本信息</h1>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院名称</label>
                        <el-input v-model="hi_name" :disabled="isdisabled"></el-input>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院编号</label>
                        <el-input v-model="hi_id" :disabled="true"></el-input>
                    </div>
                </el-col>

            </el-row>
            <h1>路由配置</h1>
            <el-row style="padding:20px 0 0 20px">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

            </el-row>
            <el-row style="padding: 0 0 0 20px">
                <div>
                    <el-checkbox-group v-model="checkedMenu" @change="handlecheckedMenuChange">
                        <el-checkbox v-for="item in menus" :label="item" :key="item" :disabled="item == '用户权限管理' || item == '医院管理'">{{item}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-row>

        </div>
        <div class="btn-group" v-if="isdisabled">
            <el-button type="primary" size="small" @click="update">修改</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="btn-group" v-else>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="popup">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>是否确定放弃本次操作？</span>
                <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">我再想想</el-button>
        <el-button type="primary" @click="giveup">确定放弃</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {hospitalSelect,hospitalUpdate,hospitalAdd} from "../../api/hospital";
    import {menuListGet} from "../../api/menu";
    export default {
        name: "detail",
        data() {
            return {
                hi_name:'',
                hi_id:'',
                checkAll: false,
                checkedMenu: [],
                menus: [],
                isIndeterminate: true,
                departmentList:[],
                idName:{
                    30001:'用户权限管理',
                    30002:'医院管理',
                    30003:'医院信息管理',
                    30004:'科室管理',
                    30005:'病例管理',
                    30006:'统计管理',
                    30007:'医生管理',
                    30008:'患者管理'
                },
                nameId:{
                    用户权限管理:'30001',
                    医院管理:'30002',
                    医院信息管理:'30003',
                    科室管理:'30004',
                    病例管理:'30005',
                    统计管理:'30006',
                    医生管理:'30007',
                    患者管理:'30008',
                },
                dialogVisible: false,
                isdisabled:false
            }
        },

        created() {
            if(this.$route.query.id){
                this.backShow((this.$route.query.id));
                this.isdisabled = true;
            }
            this.getMenu()
        },

        mounted() {

        },

        methods: {
            async getMenu(){
                let res = await menuListGet();
                let arr = [];
                res.map(item=>{
                    arr.push(item.sm_name)
                })
                this.menus = arr;
                console.log(res,'二级路由列表')
            },
            async backShow(id){
                try{
                    let { list } = await hospitalSelect({
                        pageIndex: 1,
                        pageSize: 1000,
                        hi_id:id
                    });
                    this.hi_id = list[0].hi_id;
                    this.hi_name = list[0].hi_name;
                   let arr1 = list[0].hi_menu.split(',');
                   arr1 = arr1.map(item=>{
                       return this.idName[item];
                   });
                    console.log(arr1)
                    this.checkedMenu = arr1;
                    console.log(list,'路由')
                }catch (e) {
                    console.error(e);
                }

            },
            goBack() {
                this.$router.go(-1);
            },
            async update(){
                if(!this.hi_name){
                    this.$message.error('医院信息不能为空')
                }
                try{
                    this.checkedMenu = this.checkedMenu.map(item =>{
                        return this.nameId[item];
                    })
                    let res = await hospitalUpdate({
                        hi_id: this.hi_id,
                        hi_menu:this.checkedMenu
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/hospitalManage"
                            });
                        },100)
                    }
                    console.log(res)
                }catch (e) {
                    console.error(e)
                }
            },
            async add(){
                if(!this.hi_name){
                    this.$message.error('医院信息不能为空')
                }
                try{
                    this.checkedMenu = this.checkedMenu.map(item =>{
                        return this.nameId[item];
                    })
                    let res = await hospitalAdd({
                        hi_name:this.hi_name,
                        hi_menu:this.checkedMenu,
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/hospitalManage"
                            });
                        },100)
                    }
                }catch (e) {
                    console.error(e)
                }
            },
            fail() {
                this.dialogVisible = true
            },
            giveup(){
                this.dialogVisible = false
                this.$router.push({
                    path: "/hospitalManage"
                });
            },
            handleCheckAllChange(val) {
                this.checkedMenu = val ? cityOptions : [];
                this.isIndeterminate = false;
                console.log(this.checkedMenu)
            },
            handlecheckedMenuChange(value) {
                console.log(value,'选择')
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.menus.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.menus.length;
            }
        },
    }
</script>

<style scoped lang='scss'>
    .doctorDetail {
        padding: 0 20px 20px 20px;
        .baseInfo {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            padding-bottom: 10px;
            margin: 20px 0 0 0;
            color: #2c3e50;
            font-weight: bold;

            & > h1 {
                padding: 0 20px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bolder;
                border-bottom: 1px solid #e8eaec;
            }

            .el-row {
                width: 100%;
                margin: 15px 0;
                display: flex;
                padding: 0 20px 0 0;

                .el-col {
                    .grid-content {
                        display: flex;
                        align-items: center;

                        label {
                            display: inline-block;
                            flex: 0 0 70px;
                            padding-left: 12px;
                            padding-right: 8px;
                            width: 70px;
                        }

                        .icon-uploader {
                            width: 80px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;

                            .el-upload {
                                width: 80px;
                                height: 80px;

                                img {
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                        }

                        .icon-uploader:hover {
                            border: 1px dashed #409eff;
                        }

                        .icon-uploader:hover span {
                            color: #409eff;
                        }

                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }

                        .pic-uploader {
                            width: 176px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;

                            .el-upload {
                                width: 176px;
                                height: 80px;

                                img {
                                    width: 176px;
                                    height: 80px;
                                }
                            }
                        }

                        .pic-uploader:hover {
                            border: 1px dashed #409eff;
                        }

                        .pic-uploader:hover span {
                            color: #409eff;
                        }

                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }
                    }
                }
            }
        }

        .btn-group {
            margin-top: 20px;
            text-align: right;
        }
    }
</style>